<!DOCTYPE html>
<html xmlns:th="Thymeleaf" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="common/include :: header('用户列表')" />
</head>
<body>
<div class="row" style="margin-left: 10px;">
    <div class="col-sm-12 search-collapse">
        <form id="user-form">
            <input type="hidden" id="deptId" name="deptId">
            <input type="hidden" id="parentId" name="parentId">
            <div class="select-list">
                <ul>
                    <li>
                        登录名称：<input type="text" name="loginName"/>
                    </li>
                    <li>
                        手机号码：<input type="text" name="phonenumber"/>
                    </li>
                    <li>
                        用户状态：<select name="status">
                        <option value="">所有</option>
                        <option value="">所有</option>
                        <option value="">所有</option>
                        <option value="">所有</option>
                        <option value="">所有</option>
                    </select>
                    </li>
                    <li class="select-time">
                        <label>创建时间： </label>
                        <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                        <span>-</span>
                        <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>



<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add_lay"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="updata_lay"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete_lay"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh_lay"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<th:block th:include="common/include :: footer" />
<script type="text/javascript" th:inline="none">
    var baseurl = ctx + 'userAction';
    layui.use('table', function(){
        var table = layui.table;

        var renderTable = function(){
            table.render({
                elem: '#test'
                ,url:baseurl+'/userList'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type:'radio',align: 'center'}
                    ,{field:'loginid', title:'登录名',  align: 'center'}
                    ,{field:'loginname', title:'用户名称', align: 'center'}
                    ,{field:'email', title:'邮箱', align: 'center'}
                    ,{field:'phone', title:'手机', align: 'center'}
                    ,{field:'status', title:'状态',align: 'center', templet: function(res){
                            if(res=='1'){
                                return '启用';
                            }else{
                                return '无效';
                            }
                        }
                    }
                    ,{field:'createtime', title:'创建时间', align: 'center'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align: 'center'}
                ]]
                ,page: true
            });
        }
        renderTable();
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'add_lay':
                    $.modal.open("添加菜单", baseurl+'/page/userAdd',"","",renderTable);
                    break;
                case 'updata_lay':
                    var id = data[0].id;
                    $.modal.open("编辑角色", ctx+'roleAction/page/roleEdit/'+id,"","",renderTable);
                    break;
                case 'delete_lay':
                    var id = data[0].id;
                    layer.confirm('真的删除行么', function(index){
                        $.operate.delete(ctx+'roleAction/roleDel/'+id,renderTable);
                        layer.close(index);
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'refresh_lay':
                    renderTable();
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.operate.delete(ctx+'roleAction/roleDel/'+data.id,renderTable);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $.modal.open("编辑角色", ctx+'roleAction/page/roleEdit/'+data.id,"","",renderTable);
            }
        });
    });
</script>
</body>
<style>
    body{
        height: auto !important;
    }
    .layui-table{
        width: 100% !important;
    }
    .layui-table-tips-c:before {
        position: relative;
        right: 1px;
        top: -4px;
    }
</style>
</html>
